<template>   
    <music-list 
        :songs='songs' 
        :title='title' 
        :bgImage='bgImg'
    ></music-list>
</template>
<script>
import { mapGetters } from 'vuex'
import {getSingerDetail,getMusic} from 'api/singer'
import {ERR_OK} from 'api/config'
import {createSong} from 'common/js/song'
import musicList from '../music-list/music-list'

export default {
    components:{
        musicList
    },
    data() {
        return {
            songs:[]
        }
    },
    computed:{
        title(){
            return this.singer.name
        },
        bgImg(){
            return this.singer.avatar
        },
        ...mapGetters([
            'singer'
            // ...
        ])
    },
    created() {
        this._getDetail()
    },
    methods: {
        //获得歌单数据
        _getDetail(){
            if(!this.singer.id){
                this.$router.push('/singer')
                return
            }
            getSingerDetail(this.singer.id).then(res=>{
                if(res.code=== ERR_OK){
                    this.songs=this.formatSongs(res.data.list)
                    // console.log(this.songs)
                }
            })
        },

        //处理歌单数据，
        formatSongs(list){
             let ret = []  //返回值
         list.forEach((item) => {
            let {musicData} = item   //得到music对象
            // console.log(musicData)
            //createSong必传两个参数
            if(musicData.songid && musicData.albummid){  
               // console.log(getMusic(musicData.songmid))
               getMusic(musicData.songmid).then((res) => {
                  // console.log(res)
                  if(res.code === ERR_OK){
                     // console.log(res.data)
                     const svkey = res.data.items
                     const songVkey = svkey[0].vkey
                     const newSong = createSong(musicData,songVkey)
                     ret.push(newSong)
                  }
               })
            }
         })
         // console.log(ret)
         return ret
        }
    }
        
}
</script>
<style lang="stylus" scoped>
    @import '~common/stylus/variable.styl';
    
</style>